<template>
	<view class="">
		<view class="tips">请确保您填写资料的准确性，以便我方和您取得联系！</view>
		<view class="address-form">
			<form @submit="formSubmit">


				<view class="label-input">
					<text>所在地</text>
					<region-picker style="width:100%" @change="region_change" :value="[0,0,0]">
						<view class="region">
							{{address?address:'省、市、区(必选)'}}
							<image src="@/static/Chevron.png" mode=""></image>
						</view>
					</region-picker>

				</view>
				<view class="label-input isMargin">
					<text>出借额度</text>
					<input placeholder-style="font-size:28rpx" type="number" maxlength="11"
						@keyup.native="adjustMaxLen($event)" v-model="loanAmount" placeholder="出借额度(必填)" />
					<text style="width: 140rpx;">万元</text>
				</view>
				<view class="label-input">
					<text>期限许可</text>
					<input placeholder-style="font-size:28rpx" maxlength="16" v-model="loanPeriod"
						placeholder="请输入(必填)" />
				</view>
				<view class="label-input" @click="checkLoanMethod">
					<text>出借类型</text>
					<input placeholder-style="font-size:28rpx" disabled maxlength="200" v-model="loanMethod"
						placeholder="请选择(必填)" />
					<image src="@/static/Chevron.png" mode=""></image>
				</view>

				<view class="label-input" v-if="loanMethod=='股权投资' || loanMethod==''">
					<text class="area">收益方式</text>
					<textarea auto-height style="margin: 0 16rpx;" maxlength="200"
						@keyup="incomeMethod=incomeMethod.replace(/\s+/g,'')" v-model="incomeMethod"
						placeholder="请输入(必填)" />
				</view>
				<view class="label-input" v-if="loanMethod=='股权投资' || loanMethod==''" @click="checkOut">
					<text>退出方式</text>
					<input placeholder-style="font-size:28rpx" disabled maxlength="200" v-model="exitMethod"
						placeholder="请选择(必填)" />
					<image src="@/static/Chevron.png" mode=""></image>
				</view>
				<view class="label-input" v-if="loanMethod=='债权投资'">
					<text>资金利率</text>
					<input auto-height style="margin: 0 16rpx;" maxlength="8"
						@keyup="incomeMethod=incomeMethod.replace(/\s+/g,'')" v-model="incomeMethod"
						placeholder="请输入(必填)" />
				</view>
				<view class="label-input" v-if="loanMethod=='债权投资'" @click="checkRefund">
					<text>还款方式</text>
					<input placeholder-style="font-size:28rpx" disabled maxlength="200" v-model="exitMethod"
						placeholder="请选择(必填)" />
					<image src="@/static/Chevron.png" mode=""></image>
				</view>
				<view class="label-input" v-if="loanMethod=='其他'">
					<text>其他</text>
					<input placeholder-style="font-size:28rpx" disabled placeholder="面议" />
				</view>


				<view class="label-input" @click="checkFunderType">
					<text>资方类型</text>
					<input placeholder-style="font-size:28rpx" disabled maxlength="200" v-model="funderType"
						placeholder="请选择(必填)" />
					<image src="@/static/Chevron.png" mode=""></image>
				</view>
				<view class="label-input ">
					<text class="area">资方介绍</text>
					<textarea auto-height style="margin: 0 16rpx;" maxlength="200"
						@keyup="funderIntroduction=funderIntroduction.replace(/\s+/g,'')" v-model="funderIntroduction"
						placeholder="请描述(必填)" />
				</view>
				<view class="label-input" @click="checkFunderAttribute">
					<text>资金属性</text>
					<input placeholder-style="font-size:28rpx" disabled maxlength="200" v-model="funderAttribute"
						placeholder="请选择(必填)" />
					<image src="@/static/Chevron.png" mode=""></image>
				</view>


				<view class="label-input ">
					<text class="area">资料要求</text>
					<textarea auto-height style="margin: 0 16rpx;" maxlength="200"
						@keyup="requestInformation=requestInformation.replace(/\s+/g,'')" v-model="requestInformation"
						placeholder="请描述(必填)" />
				</view>




				<view class="label-input isMargin">
					<text>联系人</text>
					<input placeholder-style="font-size:28rpx" maxlength="16"
						@keyup="realName=realName.replace(/\s+/g,'')" v-model="realName" placeholder="姓名(必填)" />
				</view>
				<view class="label-input ">
					<text>联系方式</text>
					<input placeholder-style="font-size:28rpx" maxlength="11" type="number"
						@keyup="contactNumber=contactNumber.replace(/\s+/g,'')" v-model="contactNumber"
						placeholder="联系电话(必填)" />
				</view>

				<view class="label-input isMargin" @click="checkVip">
					<text>是否会员</text>
					<input placeholder-style="font-size:28rpx" disabled maxlength="200" v-model="member"
						placeholder="请选择(必填)" />
					<image src="@/static/Chevron.png" mode=""></image>
				</view>
				<view class="label-input isMargin">
					<text>我的邀请人</text>
					<input placeholder-style="font-size:28rpx" maxlength="16"
						@keyup="inviterRealName=inviterRealName.replace(/\s+/g,'')" v-model="inviterRealName"
						placeholder="姓名" />
				</view>
				<view class="label-input isMargin">
					<text class="area">备注</text>
					<textarea auto-height style="margin: 0 16rpx;height: 100rpx;" maxlength="200"
						@keyup="applyRemark=applyRemark.replace(/\s+/g,'')" v-model="applyRemark" placeholder="请输入" />
				</view>

			</form>
		</view>
		<view class="footer">
			<button type="primary" @click="submit" :style="{background:(inputAll?'#0B4E9E':'#CCCCCC')}">确定</button>
		</view>
	</view>
</template>

<script>
	import api from 'api/modules/haveCapital.js';
	import regionPicker from "@/components/region-picker/region-picker.vue"
	export default {
		name: 'HaveCapital',
		components: {
			regionPicker
		},
		data() {
			return {
				address: '', // 地址拼接
				applyRemark: "",
				cityName: "",
				contactNumber: "",
				districtName: '',
				exitMethod: '',
				funderAttribute: '',
				funderIntroduction: '',
				funderType: "",
				incomeMethod: "",
				inviterRealName: "",
				loanAmount: '',
				loanMethod: '',
				loanPeriod: '',
				member: "",
				provinceName: "",
				realName: "",
				requestInformation: "",
			}
		},
		mounted() {

		},
		computed: {
			inputAll: function() {
				if (this.loanMethod == '其他') {
					if (this.address &&
						this.contactNumber &&
						this.funderAttribute &&
						this.funderIntroduction &&
						this.funderType &&
						this.loanAmount &&
						this.loanMethod &&
						this.loanPeriod &&
						this.member &&
						this.realName &&
						this.requestInformation
					) {
						return true
					}
					return false
				} else {
					if (this.address &&
						this.contactNumber &&
						this.funderAttribute &&
						this.funderIntroduction &&
						this.funderType &&
						this.incomeMethod &&
						this.exitMethod &&
						this.loanAmount &&
						this.loanMethod &&
						this.loanPeriod &&
						this.member &&
						this.realName &&
						this.requestInformation
					) {
						return true
					}
					return false
				}

			}
		},
		methods: {
			checkboxChange(val) {
				this.financingMethod = val.detail.value
			},
			region_change(val) {
				if (val) {
					this.provinceName = val.detail.value[0]
					this.cityName = val.detail.value[1]
					this.districtName = val.detail.value[2]
					this.address = this.provinceName + '-' + this.cityName + '-' + this.districtName
				}
			},
			adjustMaxLen(el, maxlength = 8) {
				el.target.value = el.target.value.replace(/^(\d+)\.(\d\d).*$/, "$1.$2"); //只能输入2个小数
				el.target.value = el.target.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符，只能输入正整数
				el.target.value = el.target.value.replace(/^\./g, ""); //验证第一个字符是数字而不是其他的
				el.target.value = el.target.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				el.target.value = el.target.value
					.replace(".", "$#$")
					.replace(/\./g, "")
					.replace("$#$", "."); //保证.只出现一次，而不能出现两次以上

				if (el.target.value.length > maxlength) {
					if (!el.target.value.includes(".")) {
						this.loanAmount = el.target.value.slice(0, 8);
					} else {
						this.loanAmount = el.target.value.slice(0, 11);
					}
				} else {
					if (el.target.value.includes(".")) {
						el.target.value = el.target.value.slice(0, el.target.value.length);
						this.loanAmount = el.target.value.slice(
							0,
							el.target.value.length
						);
					}
				}
			},
			//出借类型
			checkLoanMethod() {
				uni.showActionSheet({
					itemList: ['股权投资', '债权投资', '其他'],
					success: (res) => {
						if (this.loanMethod == ['股权投资', '债权投资', '其他'][res.tapIndex]) {
							return
						} else {
							this.loanMethod = res.tapIndex == 0 ? '股权投资' : res.tapIndex == 1 ? '债权投资' : res
								.tapIndex == 2 ? '其他' : ""
							this.incomeMethod = ''
							this.exitMethod = ''
						}

					},

				});
			},
			//退出方式
			checkOut() {
				uni.showActionSheet({
					itemList: ['抵押担保', '股权质押', '股票质押', '债务偿还', '其他'],
					success: (res) => {
						this.exitMethod = res.tapIndex == 0 ? '抵押担保' :
							res.tapIndex == 1 ? '股权质押' :
							res.tapIndex == 2 ? '股票质押' :
							res.tapIndex == 3 ? '债务偿还' :
							res.tapIndex == 4 ? '其他' :
							""
					},

				});
			},
			//还款方式
			checkRefund() {
				uni.showActionSheet({
					itemList: ['随借随还', '净息还款', '先本后息', '先息后本', '等额本金', '等额本息'],
					success: (res) => {
						this.exitMethod = res.tapIndex == 0 ? '随借随还' :
							res.tapIndex == 1 ? '净息还款' :
							res.tapIndex == 2 ? '先本后息' :
							res.tapIndex == 3 ? '先息后本' :
							res.tapIndex == 4 ? '等额本金' :
							res.tapIndex == 5 ? '等额本息' :
							""
					},

				});
			},
			//资方类型
			checkFunderType() {
				uni.showActionSheet({
					itemList: ['银行', '基金公司', '民间投资机构', '其他'],
					success: (res) => {
						this.funderType = res.tapIndex == 0 ? '银行' :
							res.tapIndex == 1 ? '基金公司' :
							res.tapIndex == 2 ? '民间投资机构' :
							res.tapIndex == 3 ? '其他' :
							""
					},

				});
			},
			checkFunderAttribute() {
				uni.showActionSheet({
					itemList: ['个人资金', '企业资金'],
					success: (res) => {
						this.funderAttribute = res.tapIndex == 0 ? '个人资金' : '企业资金'
					},

				});
			},
			checkVip() {
				uni.showActionSheet({
					itemList: ['是', '否'],
					success: (res) => {
						this.member = res.tapIndex == 0 ? '是' : '否'
					},

				});
			},
			submit() {
				if (!this.inputAll) {
					return
				} else {
					if (!/^1([3456789])\d{9}$/.test(this.contactNumber)) {
						uni.showToast({
							title: '联系方式错误',
							icon: 'none'
						})
						return
					}
					api.supplyFunder({
						applyRemark: this.applyRemark,
						cityName: this.cityName,
						contactNumber: this.contactNumber,
						districtName: this.districtName,
						exitMethod: this.exitMethod,
						funderAttribute: this.funderAttribute,
						funderIntroduction: this.funderIntroduction,
						funderType: this.funderType,
						incomeMethod: this.incomeMethod,
						inviterRealName: this.inviterRealName,
						loanAmount: this.loanAmount,
						loanMethod: this.loanMethod == "股权投资" ? 1 : this.loanMethod == "债权投资" ? 2 : 3,
						loanPeriod: this.loanPeriod,
						member: this.member == '是' ? true : false,
						provinceName: this.provinceName,
						realName: this.realName,
						requestInformation: this.requestInformation,
					}).then(res => {
						this.address = '', // 地址拼接
							this.applyRemark = "",
							this.cityName = "",
							this.contactNumber = "",
							this.districtName = '',
							this.exitMethod = '',
							this.funderAttribute = '',
							this.funderIntroduction = '',
							this.funderType = "",
							this.incomeMethod = "",
							this.inviterRealName = "",
							this.loanAmount = '',
							this.loanMethod = '',
							this.loanPeriod = '',
							this.member = "",
							this.provinceName = "",
							this.realName = "",
							this.requestInformation = "",
							uni.showToast({
								title: '申请成功',
								icon: 'none'
							})
					})

				}

			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .uni-checkbox-input {
		width: 24rpx;
		height: 24rpx;
	}

	/deep/.uni-checkbox-wrapper {
		font-size: 28rpx;
		color: #666666;
		margin-right: 20rpx;
	}

	/deep/ .uni-checkbox-input-checked {
		color: #FFFFFF !important;
		background-color: #007aff;
		width: 24rpx;
		height: 24rpx;

		&::before {
			font-size: 24rpx !important;
		}
	}

	.tips {
		padding: 20rpx 24rpx;
		font-size: 24rpx;
		color: #666666;
	}



	.region {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.footer {
		margin: 24rpx 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;

		button {

			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 32rpx;

			&::after {
				border: 0;
			}
		}
	}
</style>
